<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>宠物商店管理平台首页测试</title>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        .mynav {}

        .mynav:hover {
            background-color: #9BAEBC;
        }

        .mycenter {
            transform: translateY(20%);
        }
    </style>
</head>

<body>
    <!--顶部框-->
    <div class="header-container justify-content-center py-3 border-bottom">
        <div class="row">
            <div class="col-lg-9 text-left px-5">
                <a href="#" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
                    <svg class="bi me-2" width="40" height="32">
                        <image width="40" height="32" xlink:href="../image/back.png"></image>
                    </svg>
                    <span class="fs-4">宠物商店商户平台</span>
                </a>
            </div>
            <div class="col-lg-3 text-center" >
                <button type="button" th:if="${session.userID}" class="btn btn-outline-primary me-2">登录</button>
                <button type="button" th:if="${session.userID}" class="btn btn-outline-primary">注册</button>
                <button type="button" th:if="${session.userID ne null}" id="btn-logout" class="btn btn-outline-primary">注销</button>
            </div>
        </div>
    </div>
    <!--顶部框结束-->
    <!--页面主体-->
    <div class="row">
        <!--侧边导航栏-->
        <div class="col-lg-2 bg-dark text-light nav nav-pills flex-column nav-justified"
            style="min-height: 90vh; padding: 0;">
            <div class="my-5" style="padding: 0;">
                <li class="nav-item" style="padding: 0;">
                    <a class="nav-link text-light mynav" href="/index" style="padding: 0;">
                        <div class="border-bottom mx-auto" style="padding-top: 5%; min-height: 7vh;">首页</div>
                    </a>
                </li>
                <li class="nav-item" style="padding: 0;">
                    <a class="nav-link text-light mynav" href="/order" style="padding: 0;">
                        <div class="border-bottom mx-auto" style="padding-top: 5%; min-height: 7vh;">订单管理</div>
                    </a>
                </li>
                <li class="nav-item" style="padding: 0;">
                    <a class="nav-link text-light mynav" href="/itemManage" style="padding: 0;">
                        <div class="border-bottom mx-auto" style="padding-top: 5%; min-height: 7vh;">商品管理</div>
                    </a>
                </li>
                <li class="nav-item" th:if="${session.admin}" style="padding: 0;">
                    <a class="nav-link text-light mynav" href="/userManage" style="padding: 0; background-color: #5F788A;">
                        <div class="border-bottom mx-auto" style="padding-top: 5%; min-height: 7vh;">用户管理</div>
                    </a>
                </li>
            </div>
        </div>
        <!--侧边导航栏结束-->
        <!--主体部分开始-->
        <div class="col-lg-10" style="background-color: #F3F6F6;">
            <div class="mt-2" style="background-color: white;">
                <table class="table table-bordered border border-2">
                    <!--芝士表头-->
                    <thead class="table-light">
                        <tr>
                            <th class="text-center">用户名</th>
                            <th class="text-center">密码(MD5)</th>
                            <th class="text-center">操作</th>
                        </tr>
                    </thead>
                    <!--芝士表身-->
                    <tbody>
                        <!--一行数据-->
                        <tr th:each="user:${session.userList}">
                            <td class="text-center" th:id="'username:'+${user.getUsername()}" th:text="${user.getUsername()}">username</td>
                            <td class="text-center" th:id="'password:'+${user.getUsername()}" th:text=" ${user.getPassword} ">password</td>
                            <td class="text-center">
                                <div class="btn-group text-center">
                                    <button type="button" class="btn btn-reset btn-primary mx-2 rounded-pill"  th:id="'reset:'+${user.getUsername()}"
                                            data-bs-toggle="modal" data-bs-target="#confirm-modal"
                                    >重置密码</button>
                                    <button type="button" class="btn btn-change btn-primary mx-2 rounded-pill" th:id="'change:'+${user.getUsername()}"
                                            data-bs-toggle="modal" data-bs-target="#editPassword"
                                    >修改密码</button>
                                    <button type="button" class="btn btn-delete btn-danger mx-2 rounded-pill" th:id="'delete:'+${user.getUsername()}">删除用户</button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!--主体部分结束-->
    </div>
    <!--页面主体结束-->
    <!-- 模态提交框 -->
    <div class="modal" role="dialog" data-bs-backdrop="static" id="editPassword">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部开始 -->
                <div class="modal-header">
                    <p class="modal-title">修改密码</p>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <!--模态框头部结束-->
                <!-- 模态框内容开始-->
                <div class="modal-body">
                    <form method="post" id="pwdForm">

                        <div class="row mt-2">
                            <div class="col-5 text-center">
                                <h5>新密码:</h5>
                            </div>
                            <div class="col-7">
                                <input type="text" id="newPwd" name="newPwd" placeholder="新密码">
                            </div>
                        </div>
                        <div id="modalMsg"></div>
                        <div class="row mt-4 mx-auto px-5">
                            <button type="button" class="btn btn-success" onclick="onNewPasswordSummit()">提交</button>
                        </div>
                    </form>
                </div>
                <!-- 模态框内容结束-->
            </div>
        </div>
    </div>

    <!--模态确认框-->
    <div class="modal" role="dialog" data-bs-backdrop="static" id="confirm-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部开始 -->
                <div class="modal-header">
                    <p class="modal-title" id="confirm-title">重置密码</p>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <!--模态框头部结束-->
                <!-- 模态框内容开始-->
                <div class="modal-body">
                    <div class="row mt-2">
                        <div class="text-center">
                            <h5><b id="confirm-msg">确认重置此用户的密码吗?</b></h5>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="text-center">
                            <button type="button" class="btn btn-danger" id="cancel-btn" data-bs-dismiss="modal">取消</button>
                            <button  type="button" class="btn btn-primary" id="confirm-btn">确认</button>
                        </div>
                    </div>
                </div>
                <!-- 模态框内容结束-->
            </div>
        </div>
    </div>
</body>
<script src="/javascripts/userScripts.js"></script>
</html>